<template>
	<header class="header">
		<div>
			<slot name="header-left">
				<a class="bv-header-btn" @click="BtnHeaderLeft">
					<i class="Kui Kui-fanhui"></i>
				</a>
			</slot>
		</div>
		<div class="header-title" v-text="title"></div>
		<div><slot name="header-right"></slot></div>
	</header>
</template>

<script>
	export default {
		name: "kui-header",
		data (){
			return {
			}
		},
		props:{
			title:{
				type : String,
				default:'kyler-vue-kui'
			},
			leftControl: {
				default: '',
				type: [String, Function]
			},
		},
		methods:{
			BtnHeaderLeft(){
				this.$router.routerBack(this.leftControl);
			}
		}
	}
</script>

<style scoped lang="scss">
.header{
	display: flex;
	height: 40px;
	border-bottom: 1px solid #ccc;
	box-sizing: border-box;
	align-items: center;
	position: static;
	top:0;
	left: 0;
	right: 0;
	padding: 0 8px;
	background: #fff;
	div{
		min-width: 60px;
	}
	.header-title{
		flex: 1;
		text-align: center;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
}
</style>